import { WeaTableNew } from 'comsMobx';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button, Input, Tabs } from 'antd';
import TaskViewExcel from "../../../components/task/view/page/excel";
import DownloadCondition from './DownloadCondition'
//import Drawer from '../../common/drawer'
import { fillinTypes } from '../../../constants/app';
import Workbook from './Workbook'
import { WeaLocaleProvider, WeaSlideModal, WeaTop } from "ecCom";
import './list.less';
import HtmlDataPanel from "./HtmlDataPanel";

const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class DataList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            filterDropdownVisible: false,
            data: this.props.store.tableStore.datas,
            searchMap: this.props.store.tableStore.filterMap ? this.props.store.tableStore.filterMap : {},
        }

    }
    render() {
        const { store } = this.props;
        this.rightLevel = 1;
        if (store.app && store.app.rightLevel) {
            this.rightLevel = store.app.rightLevel;
        }
        return (
            <div className="edc-data-list">
                {store.fillinType === fillinTypes.MULTI && <Tabs
                    type="card"
                    className="edc-tabs"
                    size="mini"
                    activeKey={store.selectedForm}
                    onChange={store.onChangeSelectedForm}
                >
                    {
                        store.forms.map(tab => {
                            return (
                                [<Tabs.TabPane key={tab.key} tab={`${tab.title}(${tab.key})`} />,
                                ...tab.tables.map(d => (
                                    <Tabs.TabPane key={`${tab.key}_${d.key}`} tab={d.name} />
                                ))]
                            )
                        })
                    }
                </Tabs>}
                <Workbook store={store} height={store.fillinType === fillinTypes.MULTI ? 'calc(100% - 47px)' : '100%'} />


                {/* visible={visible}
              width={'800'}
              height={100}
              direction={'right'}
              measureY={'%'} */}
                {
                    store.fillinType === fillinTypes.MULTI ?
                        <WeaSlideModal
                            visible={store.hide}
                            width={'60'}
                            measure={'%'}
                            height={'100'}
                            //measureY={'%'}
                            //maskStyle={{width:'60%'}}
                            title={`ecology | ${getLabel('83110', '查看详情')}`}
                            onClose={() => this.changeHide(false)}
                            onblur={() => this.changeHide(false)}
                            //className="cueb-quick-table-drawer"
                            //placement="right"
                            direction={'right'}
                            hasScroll={false}
                            //content={store.hide && <TaskViewExcel store={store.slideStore} readonly={false}></TaskViewExcel>}
                            content={store.hide && <WeaTop
                                title={store.title}
                                iconBgcolor="#1a57a0"
                                icon={<i className="icon-coms02-Data-center" />}
                                buttons={this.getButtons()}
                            >
                                <TaskViewExcel store={store.slideStore} readonly={this.rightLevel != 2}></TaskViewExcel>
                            </WeaTop>}
                            mask={true}
                            maskClosable={true}
                        >

                        </WeaSlideModal>
                        :
                        <HtmlDataPanel
                            visible={store.hide}
                            detailData={store.detailData}
                            reloadData={store.reloadData}
                            rightLevel={store.rightLevel}
                            close={() => this.changeHide(false)}
                        />
                }

            </div>
        )
    }

    getButtons = () => {
        const { store } = this.props;

        const readonly = this.rightLevel != 2;
        store.slideStore.notAutoSave = '1';
        store.slideStore.canSubmit = !readonly;
        const buttons = readonly ? [] : [
            <Button onClick={() => store.slideStore.saveExcel(store)} type="primary">{getLabel(30986, '保存')}</Button>,
        ];
        // buttons.push(<Button onClick={store.slideStore.exportExcel} type="primary">{getLabel(502294,'导出')}</Button>)
        // readonly ? "" : buttons.push(<Button onClick={(bool) => store.slideStore.setVisible(bool)} type="primary">{getLabel('502835','导入数据')}</Button>);
        return buttons;
    }

    changes(e) {
    }

    changeTable = (tab, { key }) => {
        const { store } = this.props;
        store.changeTable(tab.key, key);
    }
    changeHide = (bool) => {
        const { store } = this.props;
        store.changeHide(bool);
    }

    operateClick = (record, index, operate, flag) => {
        const { store } = this.props;
        if (operate.index === '0') {

            //store.showExcel(operate.otherpara,record.randomFieldId);
            store.slideStore.init(this.params = { pageid: operate.otherpara, userdataid: record.randomFieldId });

            this.changeHide(true);
        }
    }

    // getColumns = () => {
    //     const { store } = this.props;

    //     const columns = store.tableStore.columns;
    //     if(columns) {
    //         return columns.forEach(element => {
    //             Object.assign(toJS(element), { ...toJS(this.getColumnSearchProps(element.title, element.dataIndex)) })
    //         });
    //     } else {
    //         return {}
    //     }
    // }

    getColumns = (columns) => {
        let col = [];
        if (columns) {
            columns.forEach(element => {
                const c = Object.assign(toJS(element), { ...toJS(this.getColumnSearchProps(element.title, element.dataIndex)) });
                col.push(c);
            });

        }
        return col;
    }
    // document.getElementById("test").onclick=function(e){ alert("li"); window.event? window.event.cancelBubble = true : e.stopPropagation(); }

    changeVisible = visible => {
        this.setState({ filterDropdownVisible: visible });
        // const { store } = this.props;
        // const { filterStore } = store;
        //filterStore.toggleVisible(visible);
        // window.event? window.event.cancelBubble = true : e.stopPropagation();
        // return false;
    }
    getColumnSearchProps = (title, key) => {
        const { store } = this.props;
        const realKey = store.selectedForm + '@' + key;
        const value = this.state.searchMap[realKey];
        return {
            filterDropdown: (
                <div className="custom-filter-dropdown-edc">
                    <Input
                        placeholder={"筛选 " + title}
                        value={value}
                        onChange={(e) => { this.onInputChange(e, realKey) }}
                        onPressEnter={(a, b, c) => this.onSearch(a)}
                        style={{ width: 188, marginBottom: 8, display: 'block' }}
                    />
                    <Button type="primary"
                        onClick={(e) => this.reset(realKey)}
                        style={{ width: 90, marginRight: 8 }}>重置</Button>
                    <Button type="primary"
                        onClick={this.onSearch}
                        style={{ width: 90 }}>过滤</Button>

                </div>
            ),
            filterDropdownVisible: this.state.filterDropdownVisible,
            onFilterDropdownVisibleChange: this.changeVisible,
            width: 100,
            sorter: true,
        }
    }


    onInputChange = (e, key) => {
        const { searchMap } = this.state;
        const newSearchMap = { ...searchMap, [key]: e.target.value };
        //console.log(e.target.parentNode.parentNode,jQuery("#custom-filter-dropdown").attr("visible"),e.target,newSearchMap)
        this.setState({ searchMap: newSearchMap });
    }

    reset = (key) => {
        const { searchMap } = this.state;
        const newSearchMap = { ...searchMap, [key]: '' };

        this.setState({ searchMap: newSearchMap });
    }

    onSearch = (b) => {
        //jQuery(".ant-dropdown").addClass("ant-dropdown-hidden");

        //jQuery(".custom-filter-dropdown-edc").parent(".ant-dropdown").addClass("ant-dropdown-hidden");
        const { store } = this.props;
        console.log(store);
        this.setState({
            filterDropdownVisible: false
        });
        //this.changeVisible(false);
        console.log(this.state.searchMap);
        store.filterTable(this.state.searchMap);
    }

}